<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title th:replace="${title}">模板</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
  <link href="../static/css/me.css" rel="stylesheet" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
  <link rel="stylesheet" href="../static/css/other.css" th:href="@{/css/other.css}">
  <link rel="stylesheet" href="../static/lib/prime/prism.css" th:href="@{/lib/prime/prism.css}">
  <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
  <!--<link rel="stylesheet" href="../static/css/app.css" th:href="@{/css/app.css}">-->
  <link rel="stylesheet" href="../static/css/style.min.css" th:href="@{/css/style.min.css}">
  <link rel="stylesheet" href="../static/lib/editormd/css/editormd.min.css"
        th:href="@{/lib/editormd/css/editormd.min.css}">
</head>
<body>

<nav th:fragment="menu(n)">
  <div class="gird-header" style="opacity: 0.85 !important;">
    <div class="ui container" style="width: 95%!important;"> <!-- 加一个容器 -->
      <div class="ui inverted secondary stackable menu"> <!-- 菜单 stackable:可堆叠的,表示屏幕小时自动堆叠-->
        <a th:href="@{/user_index}"><h2 class="ui white header item">GuideSystem</h2></a> <!-- 蓝绿色标题 -->
        <a href="#" th:href="@{/user_index}" class="m-item m-mobile-hide item" th:classappend="${n==1} ? 'active' "><i
            class="home icon"></i>首页</a> <!-- icon表示图表 -->
        <a href="#" th:href="@{/user_forum}" class="m-item m-mobile-hide item" th:classappend="${n==2} ? 'active' "><i
            class="comments icon"></i>论坛</a>
        <a href="#" th:href="@{/user_types/-1}" class="m-item m-mobile-hide item"
           th:classappend="${n==3} ? 'active' "><i
            class="idea icon"></i>分类</a>
        <a href="#" th:href="@{/about}" class="m-item m-mobile-hide item" th:classappend="${n==4} ? 'active' "><i
            class="info icon"></i>我的</a>
        <div class="m-top-right m-mobile-hide item m-item" style="margin: auto; margin-top: -5px;"> <!-- 靠右 -->
          <form name="search" method="get" action="#" th:action="@{/user_search}" target="_blank">
            <div class="ui icon input">
              <input type="text" name="query" placeholder="输入关键字..." th:value="${query}">
              <i onclick="document.forms['search'].submit()" class="search link icon"></i>
            </div>
          </form>
          <div class="ui dropdown item">
            <div class="container">
              <img src="../static/images/店铺1.jpg" th:src="@{${session.user?.avatar}}" alt="" class="ui avatar image"
                   style="object-fit: cover;
                       outline: 0px;
                       background-size: 100% 100%;">
            </div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <a href="#" th:href="@{/about}" class="item">我的</a>
              <a href="#" th:href="@{/edit/password}" class="item">修改密码</a>
              <a href="#" th:href="@{/login/exit}" id="logout-link" class="item">退出</a>
              <a href="#" onclick="deleteAccount()" class="item">注销</a> <!--得更新-->
            </div>
          </div>
          <input type="hidden" name="concurrentId" th:value="${session.user?.id}"/>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black button icon m-top-right m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </div>
</nav>

<!--确认注销-->
<div th:fragment="destroyAccount" class="ui destroy modal">
  <i class="close icon"></i>
  <div class="header">
    账号注销
  </div>
  <div class="content">
    <div class="ui form warning">
      <div class="field">
        <label>确认密码</label>
        <input type="password" name="password" placeholder="请输入密码...">
      </div>
      <div class="ui warning message">
        <div class="header">注销提醒！</div>
        <ul class="list">
          <li>只有填入你的账号密码, 你才能注销帐号</li>
          <li>注销账号, 意味着你的账号信息全部清空</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="actions">
    <button class="ui secondary button" id="confirmDestroy">
      确认
    </button>
    <button class="ui cancel button">
      取消
    </button>
  </div>
</div>

<!--页面脚注-->
<footer class="ui inverted vertical segment m-padded-tb-massive footer-class"
        style="position: relative; width: 100%; height: 310px; opacity: 0.85; background-color: rgba(0, 0, 0, 1);">
  <!-- vertical:垂直的 segment:条横 inverted:倒置的 -->
  <div class="ui center aligned container"> <!-- center aligned:居中 aligned:使成为一条线-->
    <div class="ui inverted divided stackable grid"> <!-- inverted divided grid:格线分成16份 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">消费者维权</h4>
        <div class="ui inverted link list">
          <a href="https://www.12377.cn/" class="item m-text-thin" target="_blank">中国互联网举报中心</a>
          <a href="https://www.12389.gov.cn/" class="item m-text-thin" target="_blank">公安部举报中心</a>
          <a href="https://www.beian.gov.cn/portal/index.do" class="item m-text-thin"
             target="_blank">全国互联网安全服务平台</a>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">服务</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">广告推广</a>
          <a href="#" class="item m-text-thin">技术支持</a>
          <a href="#" class="item m-text-thin">合作/招聘</a>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">联系我</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin" style="height: 28px">邮箱: 1923326384@qq.com</span>
          <span class="item m-text-thin">QQ: 1923326384</span>
        </div>
      </div>

      <!-- 分成七列 -->
      <div class="seven wide column">
        <h4 class="ui inverted header m-text-thin">关于我们</h4>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">
          此系统旨在联合全国各大高校、教育考试院、教育厅等，将研究生录取相关信息全面化、公开化、透明化，减少考生在搜寻资料上遇到的麻烦，
          切实提高信息捕获效率，使考生能树立可行的目标，明确方向，提高上岸成功率！
        </p>
      </div>

    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">版权 @ 2024-03-18 设计 Kafka项目组</p>
  </div>
</footer>

<th:block th:fragment="script">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>
  <script src="../static/lib/prime/prism.js" th:src="@{/lib/prime/prism.js}"></script>
  <script src="../static/lib/tocbot/tocbot.js" th:src="@{/lib/tocbot/tocbot.js}"></script>
  <!--<script src="../static/js/app.js" th:src="@{/js/app.js}"></script>-->
  <script src="../static/js/main.min.js" th:src="@{/js/main.min.js}"></script>
  <script src="../static/js/perfect-scrollbar.min.js" th:src="@{/js/perfect-scrollbar.min.js}"></script>
  <script src="../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
  <script>

      $('.menu.toggle').click(function () {
          $('.m-item').toggleClass('m-mobile-hide');
      });

      $('.ui.dropdown').dropdown({
          on: 'hover'
      });

      $('#toTop-button').click(function () {
          $(window).scrollTo(0, 500);
      });

      /*
      * 后端使用response.getWriter().print()向前端发送的是包含JavaScript脚本的HTML内容，意图在客户端执行JavaScript来实现alert弹窗和页面重定向。
      * 然而，前端的fetch API默认并不会将这种形式的响应作为可执行的JavaScript来处理。
      *
      * 这里推荐的做法是让后端返回JSON格式的数据，告知前端操作结果以及需要进行的动作（如重定向或显示提示信息），然后前端解析JSON并根据结果执行相应的操作。
      * */
      function deleteAccount() {
          $('.destroy.modal').modal('show');

          $('#confirmDestroy').click(async () => {
              var searchParams = new URLSearchParams();
              searchParams.append("password", $("[name='password']").val());

              const response = await fetch("/dev/login/delete", {
                  method: 'POST',
                  redirect: 'follow', // 允许fetch跟随重定向
                  body: searchParams
              });
              const data = await response.json();
              console.log(data)
              if (data.status === "error") {
                  alert(data.message);
                  window.location.href = data.redirectUrl;
              } else if (data.status === "success") {
                  alert(data.message);
                  // 重定向到指定URL
                  window.location.href = data.redirectUrl;
              }
          })
      }

      window.addEventListener('resize', function () {
          let myDiv = document.getElementById('contentDiv');
          if (myDiv.clientHeight < 635) {
              myDiv.style.height = '635px';
          } else {
              // 如果之前已经设置了固定的550px高度，这里可以取消设置以恢复原始高度
              myDiv.style.height = '';
          }
      });

      // 页面加载完成后执行一次检查
      (function () {
          let myDiv = document.getElementById('contentDiv');
          if (myDiv.clientHeight < 635) {
              myDiv.style.height = '635px';
          }
      })();

      // 绑定退出按钮的点击事件
      $('#logout-link').on('click', function (event) {
          // 清除 sessionStorage
          window.sessionStorage.clear();
      });

  </script>
</th:block>


</body>
</html>